import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./Header.css";
import { Search ,Sticky} from "react-vant";
interface HeaderProps {
  location: string;
}

const Header: React.FC<HeaderProps> = ({ location }) => {
  const [value, setValue] = useState("");
  const navigate = useNavigate();
  return (
      <Sticky>
  <header className="header">
      <h3>
        {" "}
        <div className="logo">
          妙手医生 <span style={{ fontSize: "14px" }}>妙手互联网医院</span>{" "}
        </div>
        <div className="location">{location}</div>
      
      <Search
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onClickInput={() => navigate("/search")}
        clearable
        placeholder="搜索医生、医院、药品、疾病症状"
        style={{
          backgroundColor: "rgba(32, 136, 247, 0.87)", // 设置为带有 0.5 透明度的蓝色
          borderRadius: "20px",
          padding: "0 10px",
          marginTop: "10px",
          width: "100%",
          height: "40px",
          color: "white",
        }}
      /></h3>
    </header>
    </Sticky>
    
  );
};

export default Header;
